<template>
  <div>
    <!-- 输入框 -->
    <header>
      <h1>小黑记事本</h1>
      <input placeholder="请输入任务" v-model="name" />
      <button @click="add" >添加任务</button>
    </header>
  </div>
</template>
<script>
export default {
  name: 'TodoHeader',
  data () {
    return {
      name: ''
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    add () {
      this.$emit('add', {
        id: +Date.now(),
        name: this.name
      });
      this.name = ''
    }
  }
}
</script>
<style   scoped>
header {
  background-color: pink;
}
</style>
